
<template>
    <div id="user">
        <h1 class="top_name">用户列表</h1>
        <div>
            <div class="condition">
                <div class="search-text">
                    <label>昵称:</label>
                <el-input
                        name="name"
                        placeholder="请输入昵称"
                        v-model="user_name"
                        class="input_class"
                        clearable>
                </el-input>
                    <label>手机号:</label>
                <el-input
                        placeholder="请输入手机号"
                        v-model="mobile"
                        class="input_class"
                        clearable>
                </el-input>
                    <label>用户类型:</label>
                    <el-select v-model="user_type" placeholder="请选择">
                        <el-option
                                v-for="item in type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <label>等级:</label>
                    <el-select v-model="user_level" placeholder="请选择">
                        <el-option
                                v-for="item in level"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <label>开始时间:</label>
                    <el-date-picker
                            v-model="time_start"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择开始时间">
                    </el-date-picker>
                    <label>结束时间:</label>
                    <el-date-picker
                            v-model="time_end"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择结束时间">
                    </el-date-picker>
                </div>
                <div class="search-button">
                    <el-button type="primary" @click="getUserList()">搜索</el-button>
                    <el-button type="primary" @click="reset()">重置</el-button>
                    <el-button type="primary" @click="exportExcel()">导出</el-button>
                </div>
            </div>



        </div>
        <userlist class="user_table" :tableData="datalist"
        ></userlist>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page_total">
        </el-pagination>
    </div>
</template>

<script>
    import userlist from "@/components/UserListTab.vue";
    export default {
        name: 'UserList',
        data(){
            return{
                datalist:[{
                user_name: '王小虎',
                mobile: '18380461109',
                user_type: '/',
                user_level: '5',
                sale_number: '22551',
                sale_bill: '515454',
                cash_account: '23254854',
                point_account: '2325400551545454',
                create_time: '2016-05-02 15:25:23'
            }, {
                user_name: '王小虎',
                mobile: '18380461109',
                user_type: '/',
                user_level: '5',
                sale_number: '22551',
                sale_bill: '515454',
                cash_account: '23254854',
                point_account: '2325400',
                create_time: '2016-05-02 15:25:23'
            }],
                type: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                level: [{
                    value: '选项1',
                    label: '黄金糕'
                }],
                user_type: '',
                user_level:'',
                user_name:'',
                mobile:'',
                time_start:'',
                time_end:'',
                page_total:1000, // 总数
                currentPage:4  // 当前页

            }
        },
        mounted() {
            // this.getUserList();
        },
        components:{
            userlist
        },
        methods:{
            handleSizeChange(val) {   //选择多少条触发事件
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) { // 页数改变触发事件
                console.log(`当前页: ${val}`);
            },
             getUserList(){
                this.$store.commit("changeLoading",true)
                this.$api.getUserList().then((res)=>{
                    // this.datalist=res.data; // 处理数据
                    this.$store.commit("changeLoading",false)
                },(err)=>{
                    this.$message.error(err.msg)
                })

            },
            getSearch(){ // 搜索

            },
            reset(){ // 重置
                this.user_type='';
                this.user_level='';
                this.user_name='';
                this.mobile='';
                this.time_start='';
                this.time_end='';
            },
            exportExcel(){ // 导出
                let url=process.env.API_HOST+"/index.php/dataofuser/getTotalList?type="+this.isCut+"&to_excel=1"
                const a=document.createElement("a")
                a.setAttribute("download","");
                a.setAttribute("href",url)
                a.click()
            },
        }
    }
</script>
<style scoped>
    .top_name{
        text-align: left;
        padding-left: 10px;
        font-size: 0.9rem;
        margin-top: -5px;
        padding-bottom: 0.5rem;
        color: #303133;
    }
    .user_table{
        margin-top: 0.5rem;
        text-align: center;
        font-size: 0.9rem;
        line-height: 0.8rem;
    }
    .condition{
        display: flex;
        justify-content: space-between;
    }
    .search-text{
        display: flex;
        align-items: center
    }
    .search-button{
      padding-right: 9rem;
    }
    .input_class{
        width: 11rem;
    }

    #user >>> .el-input__inner{
        height: 2rem;
    }
    #user >>>.el-pagination__total{
        padding-top: 0.5rem;
    }
    #user >>> .el-pagination__sizes{
        height: inherit;
    }
    #user >>> .el-pager {
        padding-top: 0.5rem;
    }
    #user >>> .btn-prev {
        position: relative;
        top: 0.5rem;
    }
    #user >>> .btn-next {
        position: relative;
        top: 0.5rem;
    }


    label{
        font-size: 0.8rem;
        padding: 0 0.1rem 0 0.8rem;
    }
    label:nth-child(1){
        font-size: 0.8rem;
        padding: 0 0.1rem 0 0.3rem;
    }
</style>

